<template>
  <div class="body" @scroll="handleScroll">
    <header class="common-head">
      <div class="common-head-main">
        <div class="main-box">
          <div class="main-logo">
            <img src="../assets/images/金十logo-蓝.png" alt="" />
          </div>
          <ul class="main-nav">
            <li class="main-nav-item">首页</li>
            <li class="main-nav-item">数据</li>
            <li class="main-nav-item active">资讯</li>
            <li class="main-nav-item">视频</li>
            <li class="main-nav-item">日历</li>
          </ul>
        </div>
        <div class="main-btns">
          <div class="btn-search btn-item">
            <img src="../assets/images/ic搜索.png" alt="" />
          </div>
          <button class="btn-item btn-item-one">下载APP</button>
          <button class="btn-item btn-item-tow">登录/注册</button>
        </div>
      </div>
      <div class="main-yidong">
        <div class="main-yidong-nav">
          <img src="../assets/images/ic导航.png" alt="" />
        </div>
        <div class="main-yidong-img-pic">
          <img src="../assets/images/ic头像.png" alt="" />
        </div>
      </div>
    </header>
    <section class="content-box">
      <article class="content-article">
        <h1 class="content-title">
          挂单报告：黄金上方助力明显 欧美下方有密集支撑
        </h1>
        <div class="content-news">
          <div class="content-news-user">
            <div class="news-user-avatar">
              <img src="../assets/images/头像.png" alt="" />
            </div>
            <p>
              <a href="#">Skr橙子</a>
              <span> · 1小时</span>
            </p>
          </div>
          <div class="content-news-link">
            <span>生成图片</span>
            <div class="link-img">
              <img src="../assets/images/ic生成图片.png" alt="" />
            </div>
            <div class="link-article">
              <span>分享文章</span>
              <div class="share-link">
                <img src="../assets/images/ic微博.png" alt="" />
              </div>
              <div class="share-link">
                <img src="../assets/images/ic微信.png" alt="" />
              </div>
              <div class="share-link">
                <img src="../assets/images/icQQ.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <p class="article">
          关注挂单报告，从市场的筹码分布出发，解读挂单背后的多空秘密。主要覆盖品种：黄金、原油、英镑、欧元、日元、加元、澳元。数据均来自大型经纪商，仅供参考，不作投资建议。
        </p>
        <p class="article">
          标普500指数年内迄今已上涨了逾10%，不过涨势在最近几周却陷入停滞，因交易员们在经济增长前景与通胀威胁间陷入权衡。从石油到木材的原材料成本大幅上升、供应链出现瓶颈、劳动力市场趋紧等诸多现象，均加剧了人们对通胀过热的担忧。
        </p>

        <h1 class="chart-title">近一年黄金走势</h1>
        <div class="chart-nav">
          <div>
            <el-button round size="mini" class="el-icon-lightning"
              >折线图</el-button
            >
            <el-button type="primary" round class="el-icon-s-data" size="mini"
              >柱状图</el-button
            >
          </div>
          <p class="chart-nav-data-soure">数据来源：jin10.com</p>
        </div>
        <div id="tree" style="width: 100%; height: 400px"></div>
        <p class="article color">
          由于头部正极材料企业往往与下游动力电池大厂深度绑定，产有所供，能维持较高的产能利用率，而尾部企业销量少、难盈利，整个行业马太效应进一步凸显。
        </p>
        <div class="video-box">
          <video
            src="../assets/video/11.mp4"
            controls
            poster="../assets/images/视频.jpg"
            loop
          ></video>
        </div>
        <p class="article article-content">
          标普500指数年内迄今已上涨了逾10%，不过涨势在最近几周却陷入停滞，因交易员们在经济增长前景与通胀威胁间陷入权衡。从石油到木材的原材料成本大幅上升、供应链出现瓶颈、劳动力市场趋紧等诸多现象，均加剧了人们对通胀过热的担忧。
        </p>
        <p class="declare">
          声明： <br />

          本文版权归金十数据所有，未经书面授权任何商业机构、网站、公司及个人禁止转载或再利用文中信息，违者必究。
        </p>
        <div class="agree">
          <div class="agree-img">
            <img src="../assets/images/ic点赞.png" alt="" />
          </div>
          <p class="declare declare-center">45</p>
        </div>
        <p class="declare declare-center">好文章需要您的鼓励</p>
      </article>
      <div class="content-extra">
        <div class="author">
          <div class="author-img">
            <img src="../assets/images/头像-2.png" alt="" />
          </div>
          <p class="author-declare">Skr橙子</p>
          <p class="declare">我是来自异次元的橙子</p>
          <button class="author-btn">文章：320</button>
        </div>
        <div class="recommend">
          <div class="recommend-nav">
            <h3 class="nav-head">推荐阅读</h3>
            <p class="recommend-nav-link">查看更多</p>
          </div>
          <div class="recommend-conter">
            <div class="conter-img-box">
              <img src="../assets/images/图片-1.jpg" alt="" />
            </div>
            <p class="conter-explanation">
              挂单报告：黄金留意下方空单押注元祐上行阻力分布密集
            </p>
            <div class="conter-prompt">
              <p class="prompt-time">2小时</p>
              <p class="prompt-link">喵呜</p>
            </div>
            <ul>
              <li class="recommend-conter-item">
                <div class="item-img-box">
                  <img src="../assets/images/图片-2.jpg" alt="" />
                </div>
                <div>
                  <h3 class="conter-explanation">
                    黄金下方空单押注上行阻力分布
                  </h3>
                  <div class="conter-prompt">
                    <p class="prompt-time">6小时前</p>
                    <p class="prompt-link">黄金圈</p>
                  </div>
                </div>
              </li>
              <li class="recommend-conter-item">
                <div class="item-img-box">
                  <img src="../assets/images/图片-3.jpg" alt="" />
                </div>
                <div>
                  <h3 class="conter-explanation">
                    黄金下方空单押注上行阻力分布
                  </h3>
                  <div class="conter-prompt">
                    <p class="prompt-time">昨天</p>
                    <p class="prompt-link">技术刘</p>
                  </div>
                </div>
              </li>
              <li class="recommend-conter-item">
                <div class="item-img-box">
                  <img src="../assets/images/图片-4.jpg" alt="" />
                </div>
                <div>
                  <h3 class="conter-explanation">
                    黄金下方空单押注上行阻力分布
                  </h3>
                  <div class="conter-prompt">
                    <p class="prompt-time">6月6日</p>
                    <p class="prompt-link">金融资讯</p>
                  </div>
                </div>
              </li>
              <li class="recommend-conter-item">
                <div class="item-img-box">
                  <img src="../assets/images/图片-5.jpg" alt="" />
                </div>
                <div>
                  <h3 class="conter-explanation">
                    黄金下方空单押注上行阻力分布
                  </h3>
                  <div class="conter-prompt">
                    <p class="prompt-time">6月5日</p>
                    <p class="prompt-link">技术刘</p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <div>
      <div class="back-top" v-show="isShow" @click="backClick">
        <img src="../assets/images/置顶.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      isShow: false,
      option: {
        tooltip: {
          trigger: "axis", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow' |'cross'
          },
        },
        legend: {
          data: ["利润", "支出"],
          //bottom: '0',
        },
        grid: {
          left: "1%",
          right: "1%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              //坐标轴刻度相关设置。
              show: false,
            },
            data: [
              "2020/4",
              "",

              "2020/6",
              "",

              "2020/8",
              "",

              "2020/10",
              "",

              "2020/12",
              "",

              "2021/2",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            nameLocation: "center",
            nameGap: 40,
          },
        ],
        series: [
          {
            name: "利润",
            type: "bar",
            label: {
              //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
              normal: {
                //正常情况
                show: true, //是否显示标签
                position: "inside", //标签的位置。
                distance: 1, //距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。default: 5
                rotate: 0, //标签旋转。从 -90 度到 90 度。正值是逆时针。
              },
            },
            data: [
              0.3, 0.6, 0.69, 0.25, 0.55, 0.6, 0.1, 0.8, 0.4, 0.3, 0.6, 0.69,
              0.25, 0.55, 0.6, 0.1, 0.8, 0.4, 0.77, 0.6,
            ],
          },

          {
            name: "支出",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                //正常情况
                show: true, //是否显示标签
                position: "inside",
              },
            },
            data: [
              -0.3, -0.1, -0.55, -0.8, -0.2, -0.3, -0.44, -0.9, -0.55, -0.3,
              -0.1, -0.55, -0.8, -0.2, -0.3, -0.44, -0.9, -0.55, -0.66, -0.5,
            ],
          },
        ],
      },
    };
  },

  mounted() {
    let myChart = echarts.init(document.getElementById("tree"));

    const result = this.option;
    myChart.setOption(result);

    console.log(result);
    // window.addEventListener("scroll", this.handleScroll, true);
    this.handleScroll();
  },
  methods: {
    handleScroll() {
      document.getElementById("app").addEventListener("scroll", (event) => {
        // console.log("scrollTop: ", event.target.scrollTop);
        // return event.target.scrollTop;
        this.isShow = event.target.scrollTop > 30;
        // ? (this.isShow = true)
        // : (this.isShow = false);
      });
    },

    backClick() {
      let top = document.getElementById("app").scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.getElementById("app").scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
  computed: {
    personInfoClass() {
      if (this.windowWidth > 767) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../styles/mixins.less");
@main-width: 900px;

@media screen and (max-width: 414px) {
  .body {
    background-color: #fff !important;
  }
  .common-head-main {
    display: none !important;
  }
  .main-yidong {
    display: block !important;
  }
  .content-box {
    width: 100% !important;
    margin-top: 0 !important;
    display: block !important;
    .link-article {
      display: none !important;
    }
    .content-title {
      font-size: 18px !important;
      line-height: 31px !important;
    }
    .video-box {
      height: 315px !important;
    }
  }
  .content-extra {
    width: 100% !important;
    margin-left: 0 !important;
    .author {
      display: none !important;
    }
    .recommend {
      margin-top: 0 !important;
    }
  }
}
.body {
  background-color: #f9f9f9;
}

.common-head {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: #ffffff;
  z-index: 2;
  box-shadow: 0px 3px 8px 0px rgba(120, 120, 120, 0.2);
  .main-yidong {
    display: none;
    padding: 10px;
    .main-yidong-nav {
      float: left;
      width: 50px;
      height: 40px;
      padding: 8px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .main-yidong-img-pic {
      float: right;
      width: 50px;
      height: 40px;
      padding: 4px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .common-head-main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: @main-width;
    margin: 0 auto;
    height: 100%;

    .main-box {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    .main-logo {
      width: 131px;
      height: 28px;

      img {
        .img-contain();
      }
    }
    .main-nav {
      display: flex;
      margin-left: 80px;
      height: 100%;

      &-item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
        font-size: 16px;
        font-weight: 400;
        color: #2d2e33;
        height: 100%;
        &.active {
          position: relative;
          &::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 20px;
            height: 2px;
            background-color: #000;
            transform: translateX(-50%);
          }
        }
      }
    }
    .main-btns {
      .flex-vcenter();
      margin-left: auto;
      flex-shrink: 0;

      .btn-search {
        width: 17px;
        height: 17px;

        img {
          .img-contain();
        }
      }
      .btn-item {
        margin: 0 10px;
      }
      .btn-item-one {
        border-radius: 5px;
        background-color: #fff;
        color: #5778da;
        border: 1px solid #5778da;
        padding: 5px;
      }
      .btn-item-tow {
        background-color: #5778da;
        border-radius: 5px;
        padding: 5px;
        border: 1px solid #5778da;
        color: #fff;
      }
    }
  }
}
.content-box {
  display: flex;
  width: @main-width;
  margin: 0 auto;
  margin-top: 30px;
  .content-article {
    flex: 1;
    background-color: #fff;
    height: 100%;
    padding: 30px;
    .content-title {
      font-weight: 700;
      font-size: 24px;
      color: #2d2e33;
    }
    .content-news {
      display: flex;
      margin-top: 30px;
      &-user {
        display: flex;
        align-items: center;
        justify-content: center;
        p {
          margin-left: 5px;
          a {
            text-decoration: none;
          }
          span {
            color: #888888;
          }
        }
        .news-user-avatar {
          width: 34px;
          height: 34px;
          img {
            .img-contain();
          }
        }
      }
    }
    .content-news-link {
      .flex-vcenter();
      margin-left: auto;
      flex-shrink: 0;
      color: #888888;
      .link-img {
        width: 15px;
        height: 12px;
        margin-left: 5px;
        img {
          .img-contain();
        }
      }
      .link-article {
        .flex-vcenter();
        margin-left: 10px;
        .share-link {
          width: 22px;
          height: 22px;
          padding: 0 5px;
          img {
            .img-contain();
          }
        }
      }
    }
    .article {
      font-size: 14px;
      color: #787b8a;
      margin-top: 20px;
      font-family: PingFangSC;
      font-weight: 400;
      line-height: 24px;
    }
  }

  .chart-title {
    font-family: PingFangSC;
    font-size: 18px;
    color: #2d2e33;
    line-height: 20px;
    margin-top: 30px;
  }
  .chart-nav {
    .flex-vcenter();
    flex-shrink: 0;
    margin-top: 30px;
    .chart-nav-data-soure {
      .flex-vcenter();
      margin-left: auto;
      flex-shrink: 0;
      color: #888888;
      font-size: 10px;
    }
  }
  .color {
    color: #5778da !important;
    font-weight: 600;
    margin: 30px 0;
  }
  .video-box {
    width: 100%;
    height: 378px;
    video {
      width: 100%;
      height: 100%;
    }
  }
  .article-content {
    margin-top: 30px !important;
  }
  .declare {
    font-size: 12px;
    color: #b2b2b2;
    margin-top: 15px;
    line-height: 22px;
  }
  .agree {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    border-radius: 50%;
    border: 1px solid #eeeeee;
    margin-top: 70px;
    .agree-img {
      width: 25px;
      height: 25px;
      margin: auto;
      line-height: 70px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .declare-center {
    text-align: center;
  }
  .content-extra {
    width: 30%;
    height: 100%;
    margin-left: 20px;
    .author {
      width: 100%;
      height: 260px;
      background-color: #fff;
      text-align: center;
      .author-img {
        width: 90px;
        height: 90px;
        margin: 0 auto;
        padding-top: 30px;
        img {
          .img-contain();
        }
      }
      .author-declare {
        font-size: 18px;
        margin: 12px 0;
      }
      .author-btn {
        .declare();
        background-color: #fff;
        border: 1px solid #888888;
        border-radius: 4px;
      }
    }
    .recommend {
      width: 100%;
      background-color: #fff;
      margin-top: 20px;
      padding: 30px 20px;
      .recommend-nav {
        .flex-vcenter();
        .nav-head {
          font-weight: 500;
          color: #2d2e33;
          font-size: 18px;
        }
        .recommend-nav-link {
          display: flex;
          margin-left: auto;
          color: #888888;
          font-size: 12px;
        }
      }
      .recommend-conter {
        .conter-img-box {
          width: 100%;
          height: 167px;
          margin: 16px 0;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 3px;
          }
        }
        .conter-explanation {
          font-size: 14px;
          font-weight: 400;
          color: #3d4351;
          line-height: 21px;
        }
        .conter-prompt {
          .flex-vcenter();
          padding: 13px 0;
          .prompt-time {
            color: #888888;
            font-size: 12px;
          }
          .prompt-link {
            .flex-vcenter();
            .prompt-time();
            margin-left: auto;
          }
        }
        .recommend-conter-item {
          .flex-vcenter();
          padding: 10px 0;
          border-bottom: 1px solid #eeeeee;
          .item-img-box {
            width: 40%;
            height: 61px;
            margin-right: 8px;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 3px;
            }
          }
        }
      }
    }
  }
}
.back-top {
  position: fixed;
  right: 8px;
  bottom: 55px;
   cursor: pointer;
}
.back-top img {
  width: 43px;
  height: 43px;
}
</style>
